<script lang="ts" setup>
import { FlowNodeInterface } from "@/components/FlowNode/type";

defineOptions({
    name: "FlowItem",
});

defineProps({
    nodeList: {
        type: Array as () => FlowNodeInterface[],
        required: true,
    },
});
</script>
<template>
    <el-space
        :size="40"
        direction="vertical"
        :style="{ '--minus': nodeList[0].minus, '--mul': nodeList[0].mul }"
        class="flow-stage relative"
    >
        <FlowNode v-for="node in nodeList" :nodeData="node" :key="node.id" />
    </el-space>
</template>

<style lang="scss" scoped>
.flow-stage {
    &::before {
        content: " ";
        position: absolute;
        height: calc(calc(100% - var(--minus)) * var(--mul));
        width: 2px;
        top: 28px;
        left: -28px;
        background: var(--el-color-primary);
    }
}
</style>
